import React from 'react';
import useSubjectModel from './SubjectModel';
import {Card} from 'antd';
import {EditOutlined, DeleteOutlined} from '@ant-design/icons';
import '../../styles/subject.scss';
import SubjectEditor from '../../component/subjectEditor';
import {eventBus} from '../../helpers/eventBus';

const Subject = () => {
  const Model = useSubjectModel();

  const handleSubmit = (type, subject) => {
    if (type === 'add') {
      Model.effect.addSubject(subject)
    } else {
      Model.effect.updateSubject(subject)
    }
  };

  return (
    <div className="subject-page">
      {Model.state.list.map((subject, index) =>
        <Card
          className="subject-item"
          key={subject.id}
          style={{width: 300, display: 'inline-block'}}
          cover={
            <img
              alt="cover"
              src={`https://cache.51job.com${subject.picurl}`}
            />
          }
          actions={[
            <EditOutlined key="edit" onClick={() => eventBus.emit('editSubject', {...subject, index})}/>,
            <DeleteOutlined key="delete" onClick={() => Model.effect.delSubject(subject)}/>,
          ]}
        >
          <strong>{subject.title}</strong>
        </Card>
      )}
      <div className="add" onClick={() => eventBus.emit('editSubject')}>+</div>
      <SubjectEditor onSubmit={handleSubmit}/>
    </div>
  );
};

export default Subject;